<template>
	<div class="cashDetail">
		<div class="new-header">
			<img src="../../../static/images/agent-back-icon.png" alt="" class="left" @click="toBack">
			<div class="center">新注册概况</div>
			<div class="right" @click="switchMonthType()">{{ monthType }}</div>
		</div>
		<div class="lowerLevel-content">
			<div class="lowerLevel-content-title">
				<div class="lowerLevel-content-title-left">
					<div class="lowerLevel-content-title-list" :class="chosingTitle===1?'title-chosing':''"
					     @click="switchTitle(1)">累计会员数
					</div>
					<div class="lowerLevel-content-title-list" :class="chosingTitle===2?'title-chosing':''"
					     @click="switchTitle(2)">活跃会员
					</div>
					<div class="lowerLevel-content-title-list" :class="chosingTitle===3?'title-chosing':''"
					     @click="switchTitle(3)">有效会员
					</div>
				</div>
			</div>
			<div class="gray-line"></div>
			<div class="lowerLevel-content-show">
				<swiper :options="swiperOption4" ref="mySwiper">
					<swiper-slide>
						<div class="lowerLevel-content-show-title" v-if="chosingTitle===1">
							<div class="">会员帐户</div>
							<div class="">存款金额</div>
							<div class="">提款金额</div>
						</div>
						<div class="lowerLevel-content-show-content" v-if="chosingTitle===1">
							<div class="lowerLevel-content-show-content-list" @click="toMemberDetail(index)"
							     v-for="(item,index) in discountData" :key="index">
								<div class="">{{ item.loginName }}</div>
								<div class="">{{ item.cashInMoney }}</div>
								<div class="">{{ item.cashOutMoney }}</div>
								<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
								     class="lowerLevel-content-show-content-icon">
							</div>
							<div class="no-data-box" v-if="noData">
								<img src="../../../static/images/agent-reports-noData.png" alt="" class="no-data-img">
								<div class="no-data-fonts">暂无数据</div>
							</div>
						</div>
					</swiper-slide>
					<swiper-slide>
						<div class="lowerLevel-content-show-title" v-if="chosingTitle===2">
							<div class="">会员帐户</div>
							<div class="">存款金额</div>
							<div class="">提款金额</div>
						</div>
						<div class="lowerLevel-content-show-content" v-if="chosingTitle===2">
							<div class="lowerLevel-content-show-content-list" @click="toMemberDetail(index)"
							     v-for="(item,index) in discountData" :key="index">
								<div class="">{{ item.loginName }}</div>
								<div class="">{{ item.cashInMoney }}</div>
								<div class="">{{ item.cashOutMoney }}</div>
								<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
								     class="lowerLevel-content-show-content-icon">
							</div>
							<div class="no-data-box" v-if="noData">
								<img src="../../../static/images/agent-reports-noData.png" alt="" class="no-data-img">
								<div class="no-data-fonts">暂无数据</div>
							</div>
						</div>
					</swiper-slide>
					<swiper-slide>
						<div class="lowerLevel-content-show-title" v-if="chosingTitle===3">
							<div class="">会员帐户</div>
							<div class="">存款金额</div>
							<div class="">提款金额</div>
						</div>
						<div class="lowerLevel-content-show-content" v-if="chosingTitle===3">
							<div class="lowerLevel-content-show-content-list" @click="toMemberDetail(index)"
							     v-for="(item,index) in discountData" :key="index">
								<div class="">{{ item.loginName }}</div>
								<div class="">{{ item.cashInMoney }}</div>
								<div class="">{{ item.cashOutMoney }}</div>
								<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
								     class="lowerLevel-content-show-content-icon">
							</div>
							<div class="no-data-box" v-if="noData">
								<img src="../../../static/images/agent-reports-noData.png" alt="" class="no-data-img">
								<div class="no-data-fonts">暂无数据</div>
							</div>
						</div>
					</swiper-slide>
				</swiper>
				<van-loading size="24px" color="#00479D" v-if="showLoading" vertical style="margin-top: 1rem"><span
					style="color: #00479D">加载中...</span></van-loading>
				<div class="load-more" v-if="hasMore && discountData.length > 0" @click="loadMore()">
					<span>点击加载更多</span>
					<img src="../../../static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
				</div>
				<div class="load-more" v-if="!hasMore && discountData.length > 0">
					<span>已加载全部</span>
				</div>
			</div>
		</div>
	</div>



</template>

<script>
import {Toast} from 'vant'
import {swiper, swiperSlide} from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"

let vm = null
export default {
	name: "newMemberMore",
	components: {
		swiper,
		swiperSlide
	},
	data() {
		return {
			chosingTitle: 1,
			pageNumber: 1,
			hasMore: true,
			discountData: [],
			month: 'current',
			monthType: '',
			showLoading: false,
			noData: false,
			swiperOption4: {
				loop: false,
				initialSlide: 0,
				onSlideChangeEnd: function (swiper) {
					vm.switchTitle(swiper.realIndex + 1)
				}
			}
		}
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	mounted() {
		this.loadTop();
	},
	created() {
		vm = this;
	},
	methods: {
		loadTop() {
			const showType = sessionStorage.getItem('memberMonthType')
			if (showType === '1') {
				this.month = 'current'
				this.monthType = '本月'
			} else if (showType === '2') {
				this.month = 'last'
				this.monthType = '上月'
			}
			this.getRegMemberDetail()
		},
		getRegMemberDetail() {
			this.showLoading = true
			let params = {
				month: this.month,
				pageNumber: this.pageNumber,
				pageSize: 30
			}
			this.ServerAPI.postAPI(this.API.regMemberDeatilMember, params, (success, data) => {
				if (success) {
					if (data.code === '0000') {
						this.showLoading = false
						if (data.data.pageList.length === 30) {
							this.hasMore = true
						} else if (data.data.pageList.length < 30) {
							this.hasMore = false
						}
						this.discountData = this.discountData.concat(data.data.pageList)
						if (this.discountData.length === 0) {
							this.noData = true
						}
					} else {
						this.showLoading = false
						Toast.fail(data.info)
					}
				} else {
					this.showLoading = false
					Toast.fail('网络慢，请稍后再试')
				}
			})
		},
		getRegMemberActive() {
			this.showLoading = true
			let params = {
				month: this.month,
				pageNumber: this.pageNumber,
				pageSize: 30
			}
			this.ServerAPI.postAPI(this.API.regMemberDeatilActivity, params, (success, data) => {
				if (success) {
					if (data.code === '0000') {
						this.showLoading = false
						if (data.data.pageList.length === 30) {
							this.hasMore = true
						} else if (data.data.pageList.length < 30) {
							this.hasMore = false
						}
						this.discountData = this.discountData.concat(data.data.pageList)
						if (this.discountData.length === 0) {
							this.noData = true
						}
					} else {
						this.showLoading = false
						Toast.fail(data.info)
					}
				} else {
					this.showLoading = false
					Toast.fail('网络慢，请稍后再试')
				}
			})
		},
		getRegMemberValid() {
			this.showLoading = true
			let params = {
				month: this.month,
				pageNumber: this.pageNumber,
				pageSize: 30
			}
			this.ServerAPI.postAPI(this.API.regMemberDeatilValid, params, (success, data) => {
				if (success) {
					if (data.code === '0000') {
						this.showLoading = false
						if (data.data.pageList.length === 30) {
							this.hasMore = true
						} else if (data.data.pageList.length < 30) {
							this.hasMore = false
						}
						this.discountData = this.discountData.concat(data.data.pageList)
						if (this.discountData.length === 0) {
							this.noData = true
						}
					} else {
						this.showLoading = false
						Toast.fail(data.info)
					}
				} else {
					this.showLoading = false
					Toast.fail('网络慢，请稍后再试')
				}
			})
		},
		toBack() {
			sessionStorage.removeItem('memberMonthType')
			this.$router.push('/')
		},
		switchMonthType() {
			if (this.month === 'current') {
				this.month = 'last'
				this.monthType = '上月'
				sessionStorage.setItem('memberMonthType', '2')
			} else if (this.month === 'last') {
				this.month = 'current'
				this.monthType = '本月'
				sessionStorage.setItem('memberMonthType', '1')
			}
			this.pageNumber = 1
			this.discountData = []
			if (this.chosingTitle === 1) {
				this.getRegMemberDetail()
			} else if (this.chosingTitle === 2) {
				this.getRegMemberActive()
			} else if (this.chosingTitle === 3) {
				this.getRegMemberValid()
			}
			Toast.success('已切换到' + this.monthType);
		},
		switchTitle(value) {
			if (this.chosingTitle !== value) {
				this.noData = false
				this.discountData = []
				this.pageNumber = 1
				this.chosingTitle = value
				if (value === 1) {
					this.getRegMemberDetail()
				} else if (value === 2) {
					this.getRegMemberActive()
				} else if (value === 3) {
					this.getRegMemberValid()
				}
			}
			this.$refs.mySwiper.swiper.slideTo(value - 1, 500, true)
		},
		loadMore() {
			this.pageNumber++
			if (this.chosingTitle === 1) {
				this.getRegMemberDetail()
			} else if (this.chosingTitle === 2) {
				this.getRegMemberActive()
			} else if (this.chosingTitle === 3) {
				this.getRegMemberValid()
			}
		},
		toMemberDetail(index) {
			sessionStorage.setItem('cashInMoney', this.discountData[index].cashInMoney)
			sessionStorage.setItem('cashOutMoney', this.discountData[index].cashOutMoney)
			sessionStorage.setItem('validBet', this.discountData[index].validBet)
			sessionStorage.setItem('totalBet', this.discountData[index].totalBet)
			sessionStorage.setItem('netAmount', this.discountData[index].netAmount)
			sessionStorage.setItem('memberId', this.discountData[index].memberId)
			this.$router.push('/allMemberDetail')
		}
	}
}
</script>

<style lang="scss" scoped>
.cashDetail {
	.new-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1rem;
		padding: 0 .32rem;
		color: #2A2929;
		font-size: .36rem;
		font-weight: bold;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .3);
		
		.left {
			height: .32rem;
		}
		
		.center {
			width: 50%;
			margin-left: 10%;
			text-align: center;
		}
		
		.right {
			background: #0072E5;
			padding: .1rem .25rem;
			border-radius: .3rem;
			color: #FFFFFF;
			font-size: .3rem;
			font-weight: normal;
		}
	}
	
	.lowerLevel-content {
		margin-top: .3rem;
		
		.lowerLevel-content-title {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			text-align: center;
			width: 90%;
			margin: 0 auto;
			
			.lowerLevel-content-title-left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				
				.lowerLevel-content-title-list {
					width: 50%;
					color: rgb(114, 114, 114);
					height: .6rem;
				}
				
				.title-chosing {
					font-weight: bold;
					color: rgb(0, 71, 157);
					border-bottom: rgb(0, 71, 157) 5px solid;
				}
			}
		}
		
		.gray-line {
			height: 1px;
			background: rgb(160, 160, 160);
		}
		
		.lowerLevel-content-show {
			padding: 0 .2rem;
			text-align: center;
			margin-top: .2rem;
			
			.lowerLevel-content-show-title {
				height: .8rem;
				background: rgb(220, 220, 220);
				border-radius: .5rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				div {
					width: 33%;
					color: rgb(44, 44, 44);
					font-size: .28rem;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
			}
			
			.lowerLevel-content-show-content {
				.lowerLevel-content-show-content-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					border-bottom: rgb(220, 220, 220) 1px solid;
					
					div {
						width: 33%;
						height: .8rem;
						line-height: .8rem;
						color: rgb(75, 75, 75);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
					}
					
					.lowerLevel-content-show-content-icon {
						position: absolute;
						height: .2rem;
						right: .3rem;
					}
				}
			}
			
			.no-data-box {
				text-align: center;
				margin-top: 1rem;
				
				.no-data-img {
					width: 3rem;
				}
				
				.no-data-fonts {
					color: rgb(176, 182, 190);
					font-size: .4rem;
					margin-top: .2rem;
				}
			}
		}
		.load-more {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #9C9C9C;
			margin: .15rem 0 .2rem;
			
			.load-more-icon {
				height: .15rem;
				margin-left: .15rem;
			}
		}
	}
}
</style>
